<template>
	<view>
		<!-- 上半部 -->
		<view class="header">
			<view class="item1">
				核销码: MC-1234-5678-9012
			</view>
			<view class="item2">
				车辆: 奔驰FWE4/豫A98FHJ  
			</view>
			<view class="item3">
				服务内容
			</view>
			<view class="item4">
				车辆精洗
			</view>
			<view class="item4Money">
				￥ 100
			</view>
			<view class="item5">
				车辆附加费用
			</view>
			<view class="item5Money">
				￥ 100
			</view>
		</view>
		<!-- 下半部 -->
		<view class="bottom">
			
			<view class="orderMsg">
				订单信息
			</view>
			<view class="item21">
				原价
			</view>
			<view class="item21Money">
				￥ 100
			</view>
			<view class="item22">
				优惠
			</view>
			<view class="item22Money">
				-￥ 100
			</view>
			<view class="item23">
				实付金额
			</view>
			<view class="item23Money">
				￥ 25.00
			</view>
			<view class="item24">
				订单编号
			</view>
			<view class="item24Num">
				1223233445
			</view>
			<view class="item25">
				预约时间
			</view>
			<view class="item25Time">
				2020-02-18 19:24:28

			</view>
			<view class="item26">
				支付时间
			</view>
			<view class="item26Time">
				2020-02-18 19:24:28
			</view>
			<view class="item27">
				核销时间
			</view>
			<view class="item27Time">
				2020-02-18 19:24:28
			</view>
		</view>
		
		<!-- 确认核销按钮 -->
		<button class="button" @click="handleClick"  :style="{ backgroundColor: buttonColor }"  :disabled="isDisabled">{{buttonText}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  buttonColor: 'rgba(29,111,255,1)' ,// 初始按钮颜色
				  buttonText:"确认核销",
				  isDisabled:false  // 初始按钮是否禁用
			}
		},
		methods: {
			 handleClick() {
			      uni.showModal({
			        title: '核销此订单',
			        content: '请您仔细核对订单，此操作不可撤销，请谨慎操作',
			        success: (res) => {
			          if (res.confirm) {
			            this.buttonColor = 'gray'; // 用户确认后改变按钮颜色
						this.buttonText = "已核销";
						this.isDisabled = true
			          }
			        }
			      });
			    }
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	/* 核销按钮样式 */
	.button{
		top: 100px;
		width: 214px;
		height: 34px;
		line-height: 34px;
		font-weight: bold;
		border-radius: 4px;
		/* background-color: rgba(29,111,255,1); */
		color: rgba(255,255,255,1);
		font-size: 18px;
		text-align: center;
		font-family: Roboto;
	}
	/* 下半部分样式 */
	.bottom{
		left: 25px;
		top: 30px;
		margin-right: 50px;
		height: 246px;
		line-height: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		border: 1px solid rgba(239,239,239,1);
		position: relative;
	}
	.orderMsg{
		left: 8px;
		top: 16px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item21{
		left: 8px;
		top: 43px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item21Money{
		right: 10px;
		top: 43px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item22{
		left: 8px;
		top: 70px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item22Money{
		right: 10px;
		top: 70px;
		height: 20px;
		line-height: 20px;
		color: red;
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item23{
		left: 8px;
		top: 97px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item23Money{
		right: 10px;
		top:  97px;
		height: 20px;
		line-height: 20px;
		color: red;
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item24{
		left: 8px;
		top: 124px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item24Num{
		right: 10px;
		top: 124px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item25{
		left: 8px;
		top: 151px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item25Time{
		right: 10px;
		top: 151px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item26{
		left: 8px;
		top: 178px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item26Time{
		right: 10px;
		top: 178px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item27{
		left: 8px;
		top: 204px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.item27Time{
		right: 10px;
		top: 204px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	/* 第一部分样式 */
	.header{
		left: 25px;
		margin-right: 50px;
		top: 10px;
		height: 179px;
		line-height: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		border: 1px solid rgba(239,239,239,1);
		position: relative;
	}
	.item1{
		left: 8px;
		top: 20px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		text-align: left;
		position: absolute;
	}
	.item2{
		left: 8px;
		top: 54px;
		height: 30px;
		width: 96%;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		font-weight: bold;
		border-bottom: 1px solid #EEF1F6;
		position: absolute;
	}
	.item3{
		left: 8px;
		top: 94px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 15px;
		text-align: left;
		position: absolute;
	}
	.item4{
		left: 8px;
		top: 120px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 13px;
		text-align: left;
		position: absolute;
	}
	.item4Money{
		right: 10px;
		top: 120px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 13px;
		text-align: left;
		position: absolute;
	}
	.item5{
		left: 8px;
		top: 150px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 13px;
		text-align: left;
		position: absolute;
	}
	.item5Money{
		right: 10px;
		top: 150px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 13px;
		text-align: left;
		position: absolute;
	}

</style>
